<template>
  <div class="index">
    <Layout style="height:100vh">
        <div class="Message">
            <span></span>
            <ul class="Message1">
                <li>客户列表</li>
                <li>客户树</li>
                <li>等级管理</li>
                <li>理财产品</li>
            </ul>
        </div>
        
        <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" width="200px" mode="vertical" style="overflow:auto;overflow-x:hidden;">
            <div class="logo" v-if="isCollapsed==false">
                <img class="img1" src="../../assets/images/logo.jpg" alt="">
                <img class="img2" src="../../assets/images/logo-1.jpg" alt="">
            </div>
            <div class="logo-2" v-else>
                <img class="img1" src="../../assets/images/logo.jpg" alt="">
                <img class="img2" src="../../assets/images/logo-1.jpg" alt="">
            </div>
            <Menu theme="dark" width="auto" :class="menuitemClasses">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="md-people" />
                        <span>客户管理</span>
                    </template>
                    <MenuItem name="1-1" to="/home/clientList">客户列表</MenuItem>
                    <MenuItem name="1-2" to="/home/clientTree">客户树</MenuItem>
                    <MenuItem name="1-3" to="/home/levelManagement">等级管理</MenuItem>
                    <MenuItem name="1-4" to="/home/financeProducts">理财产品</MenuItem>
                    <MenuItem name="1-5" to="/home/rechargeRecord">充值记录</MenuItem>
                    <MenuItem name="1-6" to="/home/requestWithdrawal">申请提现</MenuItem>
                    <MenuItem name="1-7" to="/home/withdrawalReview">提现复审</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-stats"/>
                        <span>统计分析</span>
                    </template>
                        <MenuItem name="2-1" to="/home/statisticAnalysis/addandstart">新增和启动</MenuItem>
                        <MenuItem name="2-2" to="/home/statisticAnalysis/activeAnalysis">活跃分析</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-keypad" />
                        <span>商品管理</span>
                    </template>
                        <MenuItem name="3-1" to="/home/merchandiseControl/productList">商品列表</MenuItem>
                </Submenu>
                <Submenu name="4">
                    <template slot="title">
                        <Icon type="logo-usd" />
                        <span>支付管理</span>
                    </template>
                        <MenuItem name="4-1" to="/home/payment/channel">支付渠道</MenuItem>
                </Submenu>
            </Menu>
        </Sider>
        <Layout>
            <Header :style="{padding: 0}" class="layout-header-bar" >
                <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
                <div class="crumbs">
                    <Breadcrumb>
                        <BreadcrumbItem to="/home/clientList">home</BreadcrumbItem>
                        <BreadcrumbItem :to="path(index)" v-for="(item, index) in $route.meta.name" :key="index">{{item}}</BreadcrumbItem>
                    </Breadcrumb>
                </div>
                
                <div class="demo-avatar">
                    <Dropdown trigger="click" style="margin-right:20px;">
                        <a href="javascript:void(0)">
                            {{$t('language')}}
                            <Icon type="md-arrow-dropdown" />
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem @click.native="zh">
                                中文简体
                            </DropdownItem>
                            <DropdownItem @click.native="en">
                                English
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown> 
                    <Dropdown>
                        <Avatar style="background-color: #aaa" icon="ios-person" />
                        <Icon type="md-arrow-dropdown" />
                        <DropdownMenu slot="list">
                            <DropdownItem @click.native="logOut">{{$t('logout')}}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </Header>
            <Content :style="{margin: '20px', background: '#fff' ,overflow: 'auto'}">
                <router-view></router-view>
            </Content>
        </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
 data: () => ({
     isCollapsed: false,
 }),
created() {
},
mounted(){
    console.log(this.$route.meta)
},
computed:{
    path(){
        return function(index){
             this.$route.meta.path[index]
             console.log(index)
        }
        
    },
    rotateIcon () {
        return ['menu-icon',this.isCollapsed ? 'rotate-icon' : ''];
        },
    menuitemClasses () {
        return ['menu-item',this.isCollapsed ? 'collapsed-menu' : '']
    }
},
methods: {
    collapsedSider () {
            this.$refs.side1.toggleCollapse();
        },
    zh() {
      this.$i18n.locale = "zh";
    },
    en() {
      this.$i18n.locale = "en";
    },
    logOut() {
        this.$router.push('/')
        //     this.$axios.get("api/api/netflow/v1/xky/logout")
        //     .then(res => {
        //         console.log(res)
        //         const code = res.data.code
        //         // console.log(code)
        //         if(code == '0000'){
        //             this.$Notice.success({
        //                 desc: '登出成功！'
        //             })
        //             this.$router.push('/')
        //         }
        //         else {
        //             this.$Notice.error({
        //                 title: '登出失败',
        //                 desc: res.data.errMsg
        //             })
        //         }
                
        //     })
        //     .catch( error => {
        //         console.log(error.response)
        //         console.log(error.message)
        //         this.$Notice.error({
        //             desc: '登出失败！'
        //         })
        //     })
        },
    }
};
</script>
<style lang="less" scoped>
@import "index";
</style>